<template>
  <div class="map-page">
    <div ref="dom" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts"
import { defineProps, ref, onMounted } from "vue"
const props = defineProps({
  ItemDataResult: {
    type: Object,
    required: true
  }
})
const dom = ref(null)
const initCharts = (yearList, dataList) => {
  const charts = echarts.init(dom.value)
  const option = {
    backgroundColor: 'rgba(0,0,0,0)',
    grid: {
      containLabel: true,
      bottom: '0%',
      top: '20%',
      left: '0%',
      right: '4%',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      top: '1%',
      right: '2%',
      // itemWidth: 10,
      // itemHeight: 10,
      itemGap: 10,
      textStyle: {
        fontSize: 12,
        color: '#C9D2FA',
        // padding: [0, 0, 0, 10)],
      },
    },
    xAxis: {
      // name: "班级",
      triggerEvent: true,
      data: yearList,
      axisLabel: {
        interval: 0,
        show: true,
        fontSize: 12,
        color: '#ffffff',
      },
      axisLine: {
        show: true,
        lineStyle: {
          show: true,
          color: 'rgba(255,255,255,0.5)',
          width: 1,
        },
      },

      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        // name: '单位:万',
        // type: 'value',
        // nameTextStyle: {
        //   color: '#444444',
        // },
        axisLabel: {
          show: true,
          fontSize: 12,
          color: '#ffffff',
          formatter: function (value) {
            // 在标签后面添加百分号
            return value;
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            show: true,
            color: 'rgba(255,255,255,0.5)',
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            type: 'solid',
            color: 'rgba(255,255,255,0.5)',
          },
        },
      },
    ],
    series: dataList,
  }

  option && charts.setOption(option)
}
const transformData = (inputData) => {
  // 获取去重后的年份列表
  const yearList = [...new Set(inputData.flatMap(item => item.TestYearData.map(data => data.TestYear)))].map(year => year + '年');

  const dataList = [];
  inputData.forEach(item => {
    const itemName = item.ItemName;
    const testData = item.TestYearData;
    const data = yearList.map(year => {
      const testDataItem = testData.find(data => data.TestYear.toString() === year.slice(0, 4));
      return testDataItem ? testDataItem.Result : null;
    });

    dataList.push({
      name: itemName,
      type: 'line',
      symbol: 'circle',
      symbolSize: 6,
      // yAxisIndex: 1, // 与第二个 y 轴关联
      lineStyle: {
        width: 4,
      },
      data: data, // 折线图的数据
    });

  });

  initCharts(yearList, dataList)
}

onMounted(() => {
  transformData(props.ItemDataResult)
})
</script>

<style lang="scss" scoped>
.map-page {
  height: 100%;
  width: 100%;
  color: rgba(255, 255, 255, 0.18);
}
</style>
